{% load static %}
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>我的问答</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="../../static/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../../static/css/bootstrap-responsive.min.css" rel="stylesheet"/>
    <link href="../../static/css/font-awesome.css" rel="stylesheet"/>
    <link href="../../static/css/adminia.css" rel="stylesheet"/>
    <link href="../../static/css/adminia-responsive.css" rel="stylesheet"/>
    <link href="../../static/css/pages/plans.css" rel="stylesheet"/>
    <script src="../../static/js/ku/jquery-3.3.1.min.js"></script>
    <script src="../../static/js/ku/bootstrap.js"></script>


    <link href="../../static/css/个人中心.css" rel="stylesheet">


    <link href="../../static/css/pages/faq.css" rel="stylesheet"/>
</head>


<style>
    #btn1, #btn2, #btn3 {
        width: 160px;
        height: 40px;
        border: none;
        border-radius: 15px;
    }

    #btn1 {
        background: #ffdab9;
    }

    #btn1:visited {
        border: none;
    }

    #btn2 {
        background: #eee8cd;
    }

    #btn3 {
        background: #cdc8b1;
    }

    #tab_1, #tab_2, #tab_3 {
        margin-top: 20px;
        width: 95%;
        height: 90%;
        border-radius: 30px;
        padding: 20px;
        margin-bottom: 50px;
    }

    #tab_1 {
        background: #c1cdc1;
    }

    #tab_2 {
        background: #f7f7f7;
    }

    #tab_3 {
        background: #eee8b1;
    }

    #tab_1 {
        display: block;
    }

    #tab_2, #tab_3 {
        display: none;
    }

    a:link, a:visited {
        text-decoration: none; /*超链接无下划线*/
    }

    a:hover {
        text-decoration: none; /*鼠标放上去有下划线*/
    }
</style>
<style>
    .wd-detail {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .wd-btn-ignore {
        float: right;
        margin: 3px 0 0 10px;
        font-size: 12px;
        line-height: 30px;
        color: #999;
    }

    a {
        cursor: pointer;
    }

    .meta-pull {
        float: right;
    }

    .wd-btn-answer {
        float: right;
        margin: 3px 0 0 10px;
        width: 90px;
        height: 30px;
        background-color: #ff9d00;
        border-radius: 4px;
        text-align: center;
        line-height: 30px;
        color: #fff;
        font-size: 16px;
    }

    .wd-title {
        font-size: 20px;
        color: darkorange;

    }

    {#.wd-item a:hover {#}
    {#    color: #ffc107;#}
    {
    #}#}
    {##}
    {#.navbar a:hover {#}
    {#    display: block;#}
    {#    color: #ffc107;#}
    {#    padding: 10px;#}
    {
    #}#}

    a {
        color: #000000;
    }

    a:link, a:visited {
        text-decoration: none;
    }

    .ydc-right-head {
        display: flex;
    }

    li {
        padding-left: 40px;
    }

    .myTabContent ul li {

    }

    .ydc-right-head-info {
        display: flex;
        height: 100px;
        -webkit-flex: 1 1 780px;
        -ms-flex: 1 1 780px;
        flex: 1 1 780px;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center;
        font-weight: 700;
        background-color: #f4f4f4;
        border-radius: 3px;
    }

    .ydc-right-head-info dl {
        -webkit-flex: 1 1 0%;
        -ms-flex: 1 1 0%;
        flex: 1 1 0%
    }

</style>

<body>

<div class="navbar navbar-fixed-top">

    <div class="navbar-inner">
        <a href="/homepage/"><img src="../../static/img/logo1.png" alt="" width="150px" style="float: left"></a>
        <div class="container">
            <a class="brand" href="/homepage/">
                首页
            </a>
            <a class="brand" href="./">个人中心</a>
            <div class="nav-collapse">
            </div> <!-- /nav-collapse -->
        </div> <!-- /container -->
    </div> <!-- /navbar-inner -->
</div>
<div id="content" style="background: white">

    <div class="container">

        <div class="row">

            <div class="span3">

                <div class="account-container">
                    <div class="account-avatar">
                        <img src="{{ user.user_img }}" class="thumbnail"/>
                    </div> <!-- /account-avatar -->

                    <div class="account-details">
                        <span class="account-name">{{ user.user_name }}</span>
                        {% if user.user_sex == 1 %}
                            <span class="account-role">男</span>
                        {% else %}
                            <span class="account-role">女</span>
                        {% endif %}

                    </div> <!-- /account-details -->

                </div> <!-- /account-container -->

                <hr/>

                <ul id="main-nav" class="nav nav-tabs nav-stacked">
                    <li class="left-a">
                        <a href="/house/">
                            <i></i>
                            我的收藏
                        </a>
                    </li>
                    <li class="left-a">
                        <a href="/plans/">
                            <i></i>
                            我的游记
                        </a>
                    </li>
                    <li class="left-a">
                        <a href="/myimg/">
                            <i></i>
                            图片
                        </a>
                    </li>
                    <li class="left-a active ">
                        <a href="/interlocution/">
                            <i></i>
                            我的问答
                        </a>
                    </li>

                    <li class="left-a">
                        <a href="/mate/">
                            <i></i>
                            我的结伴
                        </a>
                    </li>


                    <li class="left-a">
                        <a href="/install/">
                            <i></i>
                            设置
                        </a>
                    </li>
                </ul>
                <hr/>
                <br/>
            </div> <!-- /span3 -->
            <div class="span9">
                <h1 class="page-title">

                    我的问答
                </h1>
                <div class="col-md-9 column">
                    <div class="col-md-12 column">
                        <div class="ydc-entered-box">
                            <div class="ydc-content-right">
                                <div class="ydc-right-head">
                                    <div class="ydc-right-head-info">
                                        <dl>
                                            <a href="#">
                                                <span>{{ problem_number }}</span>
                                                <dt style="font-size: 18px;margin-top: 10px;color:black"
                                                    class="divider">提问数
                                                </dt>
                                            </a>
                                        </dl>
                                        <dl>
                                            <a href="#">
                                                <span>{{ answer_number }}</span>
                                                <dt style="font-size: 18px ;padding-top: 14px;color:black">回答数</dt>
                                            </a>
                                        </dl>
                                        <dl>
                                            <a href="#">
                                                <a href="/issues/" target="_blank"
                                                   class="wd-btn-answer"
                                                   style="margin-right:30% ;padding-top:10px;width: 140px;height: 40px">我要提问</a>
                                            </a>
                                        </dl>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div style="margin: 10px">
                    <input type="button" id="btn1" value="我的提问"/>
                    <input type="button" id="btn2" value="我的回答"/>
                </div>
                <div class="widget">

                    <div class="widget-header">
                        <h3 id="title1">我的提问</h3>

                    </div> <!-- /widget-header -->

                    <div class="widget-content">
                        <div>
                            {#                我的提问#}
                            <div id="tab_1" style="margin: 0;background: white">
                                {% for problem in problem_list %}
                                    <div style="border-radius: 15px;">
                                        <div><a href="/qadetails/?data={{ problem.problem_id }}"><span
                                                style="font-size: 20px">{{ problem.problem_title }}</span></a></div>
                                        <div><span>{{ problem.problem_text }}</span></div>
                                    </div>
                                    <hr/>
                                {% endfor %}
                            </div>
                            {#                我的回答#}
                            <div id="tab_2" style="margin: 0;background: white">
                                {% for answer in answer_list %}
                                    <div>
                                        <div><a href="/qadetails/?data={{ answer.problem_id }}"><span
                                                style="font-size: 20px">问题标题:{{ answer.problem_title }}</span></a></div>
                                        <br>
                                        <div><span>我的回答:</span></div>
                                        <div><span>{{ answer.shorttext }}</span></div>
                                    </div>
                                    <hr/>
                                {% endfor %}
                            </div>
                        </div>
                        <script src="../../static/js/jquery-1.7.2.min.js"></script>
                        <script>

                            $("#btn1").click(function () {
                                    $("#btn1").css("background", "#f7f7f7");
                                    $("#btn2,#btn3").css("background", "#ffdab9");
                                    document.getElementById("title1").innerText="我的提问";
                                    document.getElementById("tab_1").style.display = "block";
                                    document.getElementById("tab_2").style.display = "none";
                                }
                            );

                            $("#btn2").click(function () {
                                    $("#btn2").css("background", "#eee8cd");
                                    $("#btn1,#btn3").css("background", "#c1cdc1");
                                    document.getElementById("title1").innerText="我的回答";
                                    document.getElementById("tab_1").style.display = "none";
                                    document.getElementById("tab_2").style.display = "block";
                                }
                            );
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
